<template>
	<view class="info">
		<view class="back"></view>
		<view class="user_content" v-for="(user, index) in userInfo.data">
			<view class="user_content_header">
				<custom-avatar :item="{ type: 'large', image: user.image }"></custom-avatar>
				<view class="handle">
					<view class="iconfont icon-scanning" @click="scanHandle"></view>
					<view class="iconfont icon-qrcode" @click="qrcodeHandle"></view>
					<view class="iconfont icon-setting" @click="settingHandle"></view>
				</view>
			</view>
			<view class="user_content_aside">
				<view class="text">{{ user.nickName }}</view>
				<view class="desc id">土著ID:{{ user.userId }}</view>
				<view class="desc">
					{{ user.desc }}
					<navigator :url="'../user/edit?id=' + user.userId">
						<view class="iconfont icon-edit"></view>
						编辑用户信息
					</navigator>
				</view>
			</view>
		</view>
		<view class="aside_data_list">
			<view class="aside_data_list_item" v-for="(item, index) in asideData.data">
				<navigator :url="item.url">
					<view class="text">{{ item.count }}</view>
					<view class="text">{{ item.title }}</view>
				</navigator>
			</view>
		</view>
		<custom-tabs :tabs="tabs" :currentTab="tabIndex"></custom-tabs>
		<custom-news-list v-show="tabIndex === 0" :item="tabs.data[0]"></custom-news-list>
		<custom-news-list v-show="tabIndex === 1" :item="tabs.data[1]"></custom-news-list>
		<custom-gotop v-show="isShowGoTop"></custom-gotop>
		<uni-popup ref="popup" type="center" background-color="#fff" :safe-area="false">
			<view class="qrcode">
				<canvas canvas-id="qrcode" style="width: 177px;height: 177px;margin:10rpx auto;" />
				<view class="qrcode_tip">{{ i18n('请确保周围环境安全，再使用') }}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowGoTop: false,
			userId: '',
			loading: false,
			userInfo: {
				data: []
			},
			asideData: {
				data: [
					{
						count: 0,
						title: '关注',
						url: '../user/follows'
					},
					{
						count: 0,
						title: '粉丝',
						url: '../user/follower'
					}
				]
			},
			tabs: {
				fixed: false,
				data: [
					{
						title: '点赞',
						baseStoreName: 'getGoodData',
						storeName: 'getMoreGoodData',
						pn: 0,
						loading: false,
						loaded: false,
						data: []
					},
					{
						title: '收藏',
						baseStoreName: 'getFavData',
						storeName: 'getMoreFavData',
						pn: 0,
						loading: false,
						loaded: false,
						data: []
					}
				]
			},
			tabIndex: 0
		};
	},
	onShow() {
		this.boolLogin();
	},
	onLoad() {
		this.userId = getApp().globalData.userInfo.userId;
		this.$on('onTabChange', this.onTabChange);
		this.boolLogin(this.getPageData);
	},
	onPullDownRefresh() {
		let that = this;
		this.boolLogin().then(() => {
			that.getPageData().finally(() => {
				uni.stopPullDownRefresh();
			});
		});
	},
	onReachBottom() {
		let that = this;
		this.boolLogin().then(() => {
			if (!that.tabs.data[that.tabIndex].loading) {
				that.tabs.data[that.tabIndex].loading = true;
				that[that.tabIndex === 0 ? 'getGoodData' : 'getFavData'](that.tabs.data[that.tabIndex].pn + 1).finally(() => {
					that.tabs.data[that.tabIndex].loading = false;
					that.tabs.data[that.tabIndex].pn += 1;
				});
			}
		});
	},
	onPageScroll(v) {
		if (v.scrollTop >= 200) {
			this.isShowGoTop = true;
		} else {
			this.isShowGoTop = false;
		}
	},
	methods: {
		i18n(v) {
			return this.$t('index')[v];
		},
		scanHandle() {
			uni.scanCode({
				onlyFromCamera: true,
				success: function(res) {
					console.log(res);
					uni.navigateTo({
						url: res.result
					});
				}
			});
		},
		qrcodeHandle() {
			this.$refs.popup.open('top');
			let that = this;
			let url = '/pages/user/info?id=' + this.userId;
			this._plugins.uQRCode
				.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: url,
					size: 177,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: this._plugins.uQRCode.errorCorrectLevel.H
				})
				.then(res => {
					//console.log(res);
				});
		},
		boolLogin(callback) {
			let that = this;
			return new Promise((resolve, reject) => {
				that._plugins
					.boolLogin()
					.then(() => {
						callback && callback();
						resolve();
					})
					.catch(() => {
						uni.navigateTo({
							url: '../login/login'
						});
					});
			});
		},
		settingHandle() {
			uni.navigateTo({
				url: '../user/setting?k=' + this.userId
			});
		},
		getPageData() {
			let that = this;
			return new Promise((resolve, reject) => {
				Promise.all([that.getUserInfoData(), that.getGoodData(), that.getFavData(), that.getFollowsCountData(), that.getFollowerCountData()])
					.then(res => {
						resolve();
					})
					.catch(err => {
						reject();
					});
			});
		},
		getUserInfoData() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getUserInfoData', {
						userId: that.userId
					})
					.then(res => {
						that.userInfo.data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getFollowsCountData() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getFollowsCountData', {})
					.then(res => {
						that.asideData.data[0].count = res.data[0].count;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getFollowerCountData() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getFollowerCountData', {})
					.then(res => {
						that.asideData.data[1].count = res.data[0].count;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getGoodData(pn) {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getGoodData', {
						userId: that.userId,
						pn: pn || 0
					})
					.then(res => {
						console.log(pn, 0);
						that.tabs.data[0].data = pn > 0 ? that.tabs.data[0].data.concat(res.data) : res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getFavData(pn) {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getFavData', {
						userId: that.userId,
						pn: pn || 0
					})
					.then(res => {
						that.tabs.data[1].data = pn > 0 ? that.tabs.data[1].data.concat(res.data) : res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		onTabChange(index) {
			this.tabIndex = index;
			let that = this;
			// uni.showLoading({
			// 	title: '正在拉取中',
			// 	mask: true,
			// 	complete() {
			that[that.tabs.data[that.tabIndex].baseStoreName]().finally(() => {
				uni.hideLoading();
			});
			// 	}
			// });
		}
	}
};
</script>

<style lang="less">
.info {
	.back {
		background-color: #4cd964;
		height: 260rpx;
	}
	.user_content {
		position: relative;
		padding: 10rpx 20rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		background-color: #ffffff;
		margin: -20rpx 0 0;
		.user_content_header {
			padding: 60rpx 0 0;
			display: flex;
			custom-avatar {
				position: absolute;
				top: -60rpx;
				left: 30rpx;
			}
			.handle {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				display: flex;
				.iconfont {
					font-size: 42rpx;
					display: flex;
					align-items: center;
					margin: 0 10rpx;
				}
			}
		}
		.user_content_aside {
			.text {
				font-size: 36rpx;
				padding: 20rpx 0;
			}
			.desc {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				margin: 10rpx 0;
				&.id {
					font-size: 24rpx;
					color: #999999;
				}
				navigator {
					width: 360rpx;
					margin: 0 0 0 20rpx;
					display: flex;
					align-items: center;
					padding: 12rpx 20rpx;
					border: 2rpx #cccccc solid;
					border-radius: 10rpx;
					.iconfont {
						display: inline;
						marign: 0 10rpx 0 0;
					}
				}
			}
		}
	}
	.aside_data_list {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		.aside_data_list_item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 10rpx 20rpx;
			.text {
				display: block;
				font-size: 28rpx;
				&:last-child {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
	custom-tabs {
		position: initial;
		box-shadow: 0rpx;
	}
	.qrcode {
		background-color: #ffffff;
		padding: 40rpx;
		.qrcode_tip {
			color: #c0c0c0;
			text-align: center;
			display: block;
			font-size: 24rpx;
			padding: 20rpx;
		}
	}
}
</style>
